<template>
  <view class="more_shop">
    <public-loading></public-loading>
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" title="更多店铺"></z-nav-bar>
        <view class="top_wrap df mgt-24 mgb-24">
          <view class="df top_left">
            <up-icon name="map-fill" color="#636363" size="12"></up-icon>
            <text>{{cityInfo.cityName}}东莞</text>
            <up-icon name="arrow-down-fill" color="#636363" size="12"></up-icon>
          </view>
        </view>
      </template>
      <view class="shop_list">
        <view class="shop_item mgb-24" v-for="(item,index) in 20" :key="index">
          <view class="shop_item_head">
            <text class="shop_name">南山区·大学城·民企科技园</text>
            <up-tag text="店铺" plain size="mini" > </up-tag>
          </view>
          <view class="df address_wrap justify-between mgt-24">
            <view class="df">
              <up-icon name="map-fill" color="#636363" size="12"></up-icon>
              <view class="address">南山区·大学城·民企科技园</view>
            </view>
            <view class="df navigation">
              <image src="@/static/icon/icon_daohang.png"></image>
              <text>36km</text>
            </view>
          </view>
          <view class="shop_item_footer df  mgt-24">
            <view class="footer_left">营业时间</view>
            <up-tag class="mgl-15" text="营业时间" plain size="mini"></up-tag>
          </view>
        </view>
      </view>

    </z-paging>
  </view>
</template>

<script setup>
import {ref} from "vue"
import {useCustomStores} from '@/utils/hook'
const  dataList= ref([])
const {common:{cityInfo}} = useCustomStores()
console.log('cityInfo',cityInfo)
const paging = ref(null)
const queryList = ({pageNo, pageSize})=>{
  paging.value.complete([])
}
</script>

<style lang="scss" scoped>
.more_shop{
  box-sizing: border-box;
  width: 100%;
  //padding: 0 24rpx;
  .top_wrap{
    box-sizing: border-box;
    width: 100%;
    padding: 0 24rpx;
    .top_left{
      >text{
        margin: 0 10rpx;
        color:#636363;
        font-size: 24rpx;
      }
    }
  }
  .shop_list{
    box-sizing: border-box;
    width: 100%;
    padding: 0 24rpx;
    .shop_item{
      box-sizing: border-box;
      width: 100%;
      border-radius: 16rpx;
      background-color: #FFFFFF;
      padding: 24rpx 32rpx;
      .shop_item_head{
        .shop_name{
          margin-right: 10rpx;
          font-size: 28rpx;
          font-weight: bold;
        }

      }
      .address_wrap{
        .address{
          font-size: 28rpx;
          color: #000000;
        }
        .navigation{
          background: linear-gradient( 124deg, #00CBFF 0%, #0080FF 100%);
          padding: 5rpx 10rpx;
          border-radius: 44rpx;
          >image{
            width: 32rpx;
            height: 32rpx;
          }
          >text{
            font-size: 24rpx;
            color: #FFFFFF;
          }
        }
      }
      .shop_item_footer{
        width: 100%;
        .footer_left{
          font-size: 28rpx;
          color: #000000;
          font-weight: bold;
        }

      }
    }
  }

}

</style>
